// 引入获取单篇文章数据的方法
import { getPostData } from '../../../lib/posts';
// 引入 remark 及其 html 插件，用于将 Markdown 转换为 HTML
import { remark } from 'remark';
import html from 'remark-html';

// 文章详情页组件，接收 params 参数
export default async function BlogPostPage({ params }) {
  // 根据路由参数 slug 获取对应文章的数据
  const post = getPostData(params.slug);
  // 使用 remark 将 Markdown 正文内容转换为 HTML
  const processedContent = await remark().use(html).process(post.content);
  // 转换后的 HTML 字符串
  const contentHtml = processedContent.toString();

  return (
    // 外层容器，设置内边距
    <div className="p-4">
      {/* 文章标题 */}
      <h1 className="text-2xl font-bold mb-2">{post.title}</h1>
      {/* 文章日期 */}
      <div className="text-gray-500 mb-4">{post.date}</div>
      {/* 渲染 Markdown 转换后的 HTML 内容 */}
      <div dangerouslySetInnerHTML={{ __html: contentHtml }} />
    </div>
  );
} 